<template>
  <a-card :bordered="false">
    <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :pagination="false"     
      :dataSource="dataList"
      :expandedRowKeys="expandedRowKeys" 
      @expand="handleExpand"
    >
    <div slot="status" slot-scope="text, record">
      <div v-if="text==1" class="status-color"> 
        <div class="circle"></div>
        <div class="circle-text">正常</div> 
      </div>
      <div v-else class="status-color"> 
        <div class="dark"></div>
        <div class="dark-text">离线</div> 
      </div>
    </div>
      <div
        slot="expandedRowRender"
        slot-scope="record" class="real">
          <div class="realex"  :class="record.status==1?'realexlbg':'realexdbg'" v-for="(item, index) in record.expandedArr">
              <div class="realex-top">
                <div>{{item.nodeName}}</div>
                <div class="realex-top-img"><svg t="1682323617933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2650" width="15" height="15"><path d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32z m-0.009 255.217h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32z m413.133 192.632H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32zM192.037 255.953a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM192.037 510.787a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM192.037 767.621a64 64 0 1 0 128 0 64 64 0 1 0-128 0z" p-id="2651" fill="#2c2c2c"></path></svg></div>
              </div>
              <div class="realex-bottom">
                  <div class="realex-bottom-left">
                    <svg t="1682390836496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2983" width="32" height="32"><path d="M917.6 342c-22.4-52.9-54.4-100.5-95.2-141.3-40.8-40.8-88.3-72.8-141.3-95.2-54.8-23.2-113-34.9-173-34.9s-118.2 11.8-173 34.9c-52.9 22.4-100.5 54.4-141.3 95.2C153 241.6 121 289.1 98.6 342c-23.2 54.8-34.9 113-34.9 173s11.8 118.2 34.9 173c22.4 53 54.4 100.6 95.2 141.4 40.8 40.8 88.3 72.8 141.3 95.2 54.8 23.2 113 34.9 173 34.9s118.2-11.8 173-34.9c52.9-22.4 100.5-54.4 141.3-95.2 40.8-40.8 72.8-88.3 95.2-141.3 23.2-54.8 34.9-113 34.9-173S940.8 396.9 917.6 342zM557 866.2v-42.9c0-24.9-20.1-45-45-45s-45 20.1-45 45v43.9c-98.2-11.4-184.2-63.1-241.2-138l39.1-22.6c21.5-12.4 28.9-39.9 16.5-61.5-12.4-21.5-39.9-28.9-61.5-16.5l-39.1 22.5c-17.5-41.9-27.2-87.9-27.2-136.1 0-50.1 10.5-97.8 29.3-141.1l36.9 21.3c21.5 12.4 49 5.1 61.5-16.5 12.4-21.5 5.1-49-16.5-61.5L229 296.5C286 224 370.7 174.1 467 163v37.7c0 24.9 20.1 45 45 45s45-20.1 45-45V164c94.4 13.1 177.1 63.5 232.6 135.8l-30.4 17.6c-21.5 12.4-28.9 39.9-16.5 61.5 12.4 21.5 39.9 28.9 61.5 16.5l30.7-17.7c17.9 42.3 27.8 88.8 27.8 137.5 0 46.8-9.1 91.6-25.7 132.5l-32.8-18.9c-21.5-12.4-49-5.1-61.5 16.5-12.4 21.5-5.1 49 16.5 61.5l33.7 19.5C737.3 800.7 653.3 852.9 557 866.2z" p-id="2984" fill="#ffffff"></path><path d="M552.5 351.1L518.6 310l-34.8 40.3c-1.1 1.3-27.5 32-54.2 70.1-53.4 76.3-59.6 113-59.6 134 0 80.3 65.3 145.6 145.6 145.6s145.6-65.3 145.6-145.6c0-20.8-5.9-57.2-56.8-133.3-25.5-38.1-50.8-68.7-51.9-70z m-36.9 259c-30.7 0-55.6-25-55.6-55.6 0-0.2 0.5-21.1 42.9-81.8 4.8-6.8 9.6-13.4 14.2-19.6 4.1 5.8 8.4 11.9 12.6 18.3 41.1 61.4 41.6 82.3 41.6 83.2 0 30.6-25 55.5-55.7 55.5z" p-id="2985" fill="#ffffff"></path></svg>
                  </div>
                  <div class="realex-bottom-right" v-if="record.status==1">
                    <span>{{item.humName}}</span>
                    <span>{{item.temName}}</span>
                  </div>
                  <div class="realex-bottom-right" v-else>
                    <span>暂无数据</span>
                  </div>
              </div>
          </div>
        </div>
    </a-table>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'
  export default {
    name: "TableList",
    components: {
    },
    data () {
      return {
        dataList:[],
        expandedRowKeys:[],
        // 表头
        columns: [
          {
            title: '设备状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' } 
          },
          {
            title: '设备名称',
            dataIndex: 'name',
          },
          {
            title: '设备类型',
            dataIndex: 'type'
          },
          {
            title: '设备Key',
            dataIndex: 'key',
          },
          {
            title: '安装地址',
            dataIndex: 'address',
          }
        ]
      }
    },
    created() {
     this.getList();
    },
    methods: {
      getList(){
        this.dataList=[
          {
            id:'1',
            status:'1',
            name:'墒情站10-抚远',
            type:'1',
            typeName:'墒情站',
            key:'0511220007',
            address:'抚远',
            expandedArr:[
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
            ]
          },
          {
            id:'2',
            status:'0',
            name:'墒情站10-抚远',
            type:'1',
            typeName:'墒情站',
            key:'0511220007',
            address:'抚远',
            expandedArr:[
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
            ]
          },
          {
            id:'3',
            status:'1',
            name:'气象站10-抚远',
            type:'2',
            typeName:'气象站',
            key:'0511220007',
            address:'抚远',
            expandedArr:[
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "日雨量",
                temName: "瞬时雨量:0.0mm",
                humName:"当前雨量：0.0mm"
              },
              {
                nodeName: "日雨量",
                humName:"日雨量：0.0mm"
              },
              {
                nodeName: "CO2",
                humName:"CO2:0.0pm"
              },
            ]
          },
          {
            id:'4',
            status:'0',
            name:'气象站10-抚远',
            type:'2',
            typeName:'气象站',
            key:'0511220007',
            address:'抚远',
            expandedArr:[
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "风力风速",
                temName: "风力:4.0级",
                humName:"风速：7.2m/s"
              },
              {
                nodeName: "风向",
                humName:"风向：西北风"
              },
              {
                nodeName: "日雨量",
                temName: "瞬时雨量:0.0mm",
                humName:"当前雨量：0.0mm"
              },
              {
                nodeName: "日雨量",
                humName:"日雨量：0.0mm"
              },
              {
                nodeName: "CO2",
                humName:"CO2:0.0pm"
              },
            ]
          }
        ]
        this.expandedRowKeys=[this.dataList[0]['id']]
      /*   getAction('接口地址').then((res) => {
            this.dataList = res.data;
            this.expandedRowKeys=[this.dataList[0]['id']]
        })  */
      },
      //点击图标触发
      handleExpand(expanded, record) {
        //点击哪行哪行显示
        this.expandedRowKeys=[record.id]
      }
    }
  }
</script>
<style scoped>
.status-color{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 .status-color .circle{
  background: #30b08f;
  clip-path: circle(50%);
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
.status-color .dark{
  background: #999;
  clip-path: circle(50%);
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
.status-color .circle-text{
  color:#30b08f;
}
.status-color .dark-text{
  color:#999;
}
.real{
  margin: 5px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  flex-wrap:wrap;
  box-sizing: border-box;
  color:#fff
}
.realex{
  margin:5px;
  width: 18%;
  height: 150px;
  border-radius: 10px;
  border: 1px solid #e6ebf5;
}
.realexlbg{
  background: linear-gradient(to bottom right,#5fd4cb,#56e8c1);
}
.realexdbg{
  background: linear-gradient(to bottom right,#c3c3c3,#dfdfdf);
}

.realex-top{
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}
.realex-bottom{
  margin: 30px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.realex-bottom-left{

}
.realex-bottom-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.realex-bottom-right span{
  margin-top:5px;
}
.realex-top-img{
  width: 35px;
  height: 35px;
  background: #fff;
  clip-path: circle(50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>